<template>
	<div class="teamBooking">
		<template v-if="calendarStatus == 1">
			<!-- 团队预约 -->
			<div class="date"><date-picker :calendarInfo="calendarInfo" @checkDay="checkDay" v-if="calendarInfo.yy_date.length"></date-picker></div>
			<!-- <div class="timeIn">
            <h3 class="title">选择场次</h3>
            <div class="times">
                <div class="time">
                    <p class="name">10:00-12:00</p>
                    <p class="surplus">余票：1213</p>
                </div>
                <div class="time check">
                    <p class="name">10:00-12:00</p>
                    <p class="surplus">余票：1213</p>
                </div>
                <div class="time">s
                    <p class="name">10:00-12:00</p>
                    <p class="surplus">余票：1213</p>
                </div>
            </div>
        </div> -->
			<ul class="formPart1">
				<li>
					<span class="label">
						<span class="re">*</span>
						团队人数
					</span>
					<span class="item"><input class="number" v-model="peoNum" placeholder="请输入团队人数" type="text" /></span>
				</li>
				<li>
					<span class="label">
						<span class="re">*</span>
						{{ type }}
					</span>
					<span class="item" @click="show = true">
						<span class="team_title">{{ team_title }}</span>
						<span class="icon1"></span>
					</span>
				</li>
				<li>
					<span class="label">
						<span class="re">*</span>
						团队验证码
					</span>
					<span class="item">
						<input type="text" v-model="verifyCode" placeholder="请输入团队验证码" class="code" />
						<span class="icon2" @click="verify = true"></span>
					</span>
				</li>
			</ul>
			<ul class="formPart2">
				<li>
					<span class="label">
						<span class="re">*</span>
						姓名
					</span>
					<span class="item"><input class="number" v-model="name" placeholder="请输入领队姓名" type="text" /></span>
				</li>
				<li>
					<span class="label">
						<span class="re">*</span>
						手机号码
					</span>
					<span class="item"><input class="number" v-model="phone" placeholder="请输入领队手机号码" type="text" /></span>
				</li>
			</ul>
		</template>

		<!-- 闭馆 -->
		<template v-if="calendarStatus == 9002">
			<div class="closes_box">
				<img src="../../../../static/img/closes.png" alt="" />
				<p>{{ calendarMsg }}</p>
			</div>
		</template>

		<div class="notice">
			<p class="title">参观须知</p>
			<div class="artical" style="white-space: pre-wrap;" v-html="teamtextTip"></div>
		</div>
		<div class="submit">
			<div class="btn" v-if="calendarStatus == 1" @click="nextStep">提 交</div>
			<div class="btn hui" v-else>提 交</div>
		</div>
		<van-overlay :show="show" :duration="0.5" :lock-scroll="false">
			<div v-show="show" class="radioover">
				<ul class="checkbox" @click.stop>
					<li v-for="(radio, index) in radius" :key="index" @click="check(radio.id)">
						<span class="name">{{ radio.team_title }}</span>
						<span :class="['radio', radio.id == checkId ? 'check' : '']"><van-icon name="success" /></span>
					</li>
					<li class="cancel" @click="show = false"><p>取消</p></li>
				</ul>
			</div>
		</van-overlay>
		<van-overlay :show="verify" :duration="0.5" :lock-scroll="false">
			<div v-show="verify" class="over">
				<div class="checkbox">天士力大健康城欢迎团队签约！联系电话：022-26736135</div>
				<div class="close" @click="verify = false"></div>
			</div>
		</van-overlay>
	</div>
</template>

<script>
import datePicker from '../../../components/datePicker';
import { checkPhone, hasContent } from '@/assets/js/assist';
import { Exp } from '@/assets/js/utils';
import { getTeamDate, teamtextTip, teamticketorder } from '../../../http/interface';
import { Session } from '../../../assets/js/utils';

export default {
	name: '',
	components: {
		datePicker
	},
	data() {
		return {
			calendarStatus: -1,
			calendarMsg: '',
			peoNum: '',
			type: '项目类型',
			verifyCode: '',
			name: '',
			phone: '',
			show: false,
			verify: false,
			radius: [],
			checkId: null,
			calendarInfo: {
				yy_date: []
			},
			teamtextTip: '',
			td_tp_id: '',
			day: ''
		};
	},
	computed: {
		team_title() {
			let msg = '请选择';
			if (this.checkId) {
				msg = this.radius.filter(e => {
					return e.id == this.checkId;
				})[0].team_title;
			}
			return msg;
		}
	},
	mounted() {
		let api_token = this.$route.query.api_token;
		if (api_token) {
			localStorage.setItem('api_token', this.$route.query.api_token || '');
		}
		let team_td_tp_obj = Session.get('team_td_tp_obj');
		this.td_tp_id = team_td_tp_obj && team_td_tp_obj.td_tp_id;
		this.getDate();
		this.getTeamtextTip();
	},
	methods: {
		nextStep() {
			// return this.$toast('暂未开放预约')  // 7.28 //8.14
			if (!this.td_tp_id) {
				this.$toast('请选择参观日期');
				return false;
			}
			var regular = /^[1-9]\d*$/;
			if (!regular.test(this.peoNum)) {
				this.$toast('请输入正确团队人数');
				return false;
			}
			if (!this.checkId) {
				this.$toast('请选择项目类型');
				return false;
			}
			if (!hasContent(this.verifyCode)) {
				this.$toast('团队验证码不能为空');
				return false;
			}
			if (!hasContent(this.name)) {
				this.$toast('姓名不能为空');
				return false;
			}
			if (!checkPhone(this.phone)) {
				this.$toast('手机号码为空或格式错误');
				return false;
			}
			let data = {
				td_tp_id: this.td_tp_id,
				contact_username: this.name,
				contact_phone: this.phone,
				people_num: this.peoNum,
				team_code: this.verifyCode,
				id: this.checkId, //暂无
				name: this.team_title
			};
			Session.set('team_order_info', data);
			this.$router.push({
				path: '/teamOrder'
			});
			// const res = await teamticketorder(data)
			// if(res.status == 1) {
			// this.$router.push({
			//     path: '/teamOrder'
			// })
			// }else {

			// }
		},
		check(id) {
			this.checkId = id;
			this.show = false;
		},
		async getDate() {
			try {
				const res = await getTeamDate();
				this.calendarStatus = res.status;
				this.calendarMsg = res.msg;
				if (res.status == 1) {
					this.calendarInfo = res.data;
					this.radius = res.data.team_active_item;
				} else {
				}
			} catch (error) {}
		},
		async getTeamtextTip() {
			try {
				const res = await teamtextTip();
				if (res.status == 1) {
					this.teamtextTip = res.data.text_tip_team;
				} else {
				}
			} catch (error) {}
		},
		checkDay(day) {
			this.day = day.day;
			this.td_tp_id = (day.tp && day.tp[0].td_tp_id) || '';
			Session.set('team_td_tp_obj', (day.tp && day.tp[0]) || []);
			Session.set('team_day', this.day);
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../../style/mixin.scss';

.teamBooking {
	padding-bottom: 170px;
	background: #eeeeee;

	.closes_box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #ffffff;
		padding: 36px 100px;
		border-radius: 24px;
		margin-bottom: 20px;

		img {
			width: 400px;
			height: auto;
		}
		p {
			text-align: center;
			font-size: 28px;
			line-height: 1.6;
		}
	}

	.date {
		max-width: 10rem;
		margin: 0 auto;
	}

	.timeIn {
		width: 100%;
		min-height: 226px;
		border-radius: 24px;
		background: #ffffff;
		margin-top: 20px;
		padding: 36px 30px;

		.title {
			font-size: 30px;
			font-weight: bold;
			color: #353535;
		}

		.times {
			margin-top: 29px;
			display: flex;
			overflow-x: auto;

			.time {
				width: 250px;
				height: 84px;
				background: #feeece;
				border-radius: 10px;
				padding: 12px 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex-shrink: 0;
				margin-right: 60px;

				&.check {
					background: #f8a80b;
					position: relative;

					&::after {
						content: '';
						width: 52px;
						height: 52px;
						position: absolute;
						right: 0;
						bottom: 0;
						background: url('../../../../static/img/checktime.png') no-repeat center center;
						background-size: 52px 52px;
					}

					.name {
						color: #ffffff;
					}

					.surplus {
						color: #ffffff;
					}
				}

				.name {
					font-size: 30px;
					font-weight: 500;
					text-align: center;
					color: #646464;
				}

				.surplus {
					font-size: 24px;
					font-weight: 400;
					text-align: center;
					color: #646464;
				}
			}
		}
	}

	.formPart1 {
		width: 100%;
		height: 292px;
		background: #ffffff;
		border-radius: 24px;
		margin-top: 20px;
		padding: 0 39px;

		li {
			height: 96px;
			line-height: 96px;
			border-bottom: 1px solid #eeeeee;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&:last-of-type {
				border-bottom: none;
			}

			.label {
				display: inline-block;
				font-size: 30px;
				font-weight: 500;
				color: #353535;
				width: 310px;
				flex-shrink: 0;
				// margin-right: 150px;
				.re {
					color: #e32a2a;
				}
			}

			.item {
				flex: 1;
				font-size: 28px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.team_title {
					max-width: 300px;
					display: inline-block;
					@include ellipsis();
				}

				.number {
					width: 100%;
					border: none;
					height: 80px;
					outline: none;

					font-size: 28px;
					font-weight: 500;

					&::placeholder {
						color: rgba(176, 176, 176, 1);
					}
				}

				.code {
					width: 80%;
					outline: none;
					border: none;
				}

				.icon1 {
					display: inline-block;
					width: 34px;
					height: 34px;
					background: url('../../../../static/img/yuyue_jinru.png') no-repeat center center;
					background-size: 34px 34px;
				}

				.icon2 {
					display: inline-block;
					width: 34px;
					height: 34px;
					background: url('../../../../static/img/yiwen.png') no-repeat center center;
					background-size: 34px 34px;
					flex-shrink: 0;
				}

				// .code{
				//     flex: 1;
				//     border: none;
				//     height: 80px;
				//     outline: none;
				// }
			}
		}
	}

	.formPart2 {
		width: 100%;
		height: 194px;
		background: #ffffff;
		border-radius: 24px;
		margin-top: 20px;
		padding: 0 39px;

		li {
			height: 96px;
			line-height: 96px;
			border-bottom: 1px solid #eeeeee;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&:last-of-type {
				border-bottom: none;
			}

			.label {
				display: inline-block;
				font-size: 30px;
				font-weight: 500;
				color: #353535;
				width: 310px;
				flex-shrink: 0;
				// margin-right: 150px;
				.re {
					color: #e32a2a;
				}
			}

			.item {
				flex: 1;
				font-size: 28px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				input {
					width: 100%;
					border: none;
					height: 80px;
					outline: none;

					font-size: 28px;
					font-weight: 500;
				}
			}
		}
	}

	.notice {
		width: 100%;
		min-height: 355px;
		padding: 36px 30px;

		.title {
			font-size: 30px;
			font-weight: bold;
			color: rgba(50, 50, 50, 1);
			margin-bottom: 30px;
		}

		.artical {
			font-size: 28px;
			font-weight: 400;
			color: rgba(50, 50, 50, 1);
			line-height: 48px;
		}
	}

	.submit {
		width: 100%;
		height: 170px;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		border-top-left-radius: 24px;
		border-top-right-radius: 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 30px;

		.btn {
			width: 480px;
			height: 72px;
			border-radius: 36px;
			background: #f17f2a;
			color: #ffffff;
			line-height: 72px;
			text-align: center;
			font-size: 32px;

			&:active {
				background: #ed9f65;
			}
			
			&.hui {
				background-color: #cccccc;
				&:active {
					background: #cccccc;
				}
			}
			
		}
	}
	.radioover {
		width: 100%;
		max-height: 664px;
		// background: #ffffff;
		position: absolute;
		bottom: 0;
		.checkbox {
			width: 100%;
			background: #ededed;
			// padding: 26px 0;
			// border-radius: 24px;
			font-size: 32px;
			line-height: 1.5;
			border-top-left-radius: 24px;
			border-top-right-radius: 24px;

			li {
				// height: 84px;
				// line-height: 84px;
				padding: 30px 38px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #ffffff;
				border-bottom: 1px solid #ededed;
				&:nth-of-type(1) {
					border-top-left-radius: 24px;
					border-top-right-radius: 24px;
				}

				.name {
					font-size: 30px;
					font-weight: 500;
					color: rgba(50, 50, 50, 1);
					max-width: 450px;
					// @include ellipsis(1);
				}

				.radio {
					width: 32px;
					height: 32px;
					border-radius: 50%;
					font-size: 18px;
					background: #dfdfdf;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;

					&.check {
						background: #f17f2a;
						animation: smallToBig 0.2s;
					}
				}

				@keyframes smallToBig {
					0% {
						transform: scale(0);
					}
				}
			}
			.cancel {
				margin-top: 5px;
				p {
					width: 100%;
					text-align: center;
				}
			}
		}
	}
	.over {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.checkbox {
			width: 606px;
			background: #ffffff;
			padding: 26px 38px;
			border-radius: 24px;
			font-size: 32px;
			line-height: 1.5;

			li {
				// height: 84px;
				// line-height: 84px;
				padding: 30px 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.name {
					font-size: 30px;
					font-weight: 500;
					color: rgba(50, 50, 50, 1);
					max-width: 450px;
					// @include ellipsis(1);
				}

				.radio {
					width: 32px;
					height: 32px;
					border-radius: 50%;
					font-size: 18px;
					background: #dfdfdf;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;

					&.check {
						background: #f17f2a;
						animation: smallToBig 0.2s;
					}
				}

				@keyframes smallToBig {
					0% {
						transform: scale(0);
					}
				}
			}
		}

		.close {
			width: 74px;
			height: 74px;
			background: url('../../../../static/img/guanb.png') no-repeat center center;
			background-size: 100% 100%;
			margin-top: 96px;
		}
	}
}
</style>
